<template>
  <div>
   <h1>{{msg}}</h1>
   <button @click="rev">点击我翻转</button>
  </div>
</template>

<script>
export default {
  //定义数据
  data() {
    return {
    msg:'HEELO,WORLD'
    }
  },
  methods:{
    rev(){
      // 1.将msg转成数组
      const arr=this.msg.split('')
      // 2.翻转所有元素 
      // 3.赋值给msg变量 
      this.msg=arr.reverse().join('')
      // 数据驱动视图:msg被修改了，所以用到msg的地方会自动更新
    }
  }
};
</script>

<style>
</style>